<template>
    <div class="Zky_Badge">
        <span>{{ title }}</span>
        <span class="Zky_Badge_Span" v-if="prop.total > 0">{{ num }}</span>
    </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue"
const title = ref("好友申请")
const num = ref("")
const prop = defineProps({
    title: {
        type: String, // 参数类型
        default: "好友申请", //默认值
    },
    total: {
        type: Number, // 参数类型
        default: 0, //默认值
    },
    max: {
        type: Number, // 参数类型
        default: 10, //默认值
    }
})
watch([() => prop.title, () => prop.total], () => {
    init()
})
const init = () => {
    if (prop.total > prop.max) {
        num.value = `${prop.max}+`

    } else {
        num.value = prop.total.toString()

    }

    title.value = prop.title

}
init()
</script>

<style scoped lang="scss">
.Zky_Badge {
    display: inline-block;
    border: 1px solid red;
    border-radius: 4px;
    padding: 6px 8px;
    cursor: pointer;
    position: relative;
    text-align: center;

    .Zky_Badge_Span {
        padding: 4px;
        background: red;
        display: inline-block;
        min-width: 60px;

        line-height: 20px;
        border-radius: 20px;
        position: absolute;
        top: -20px;
        right: -30px;
        text-align: center;
        color: #fff;
        font-size: 0.8rem;
    }

}
</style>